<template>
    <div>
        <div style="margin-bottom: 16px">
            <div class="top">
                <div>
                    <h2>当前审批中</h2>
                    <p>{{datas.currApproveCount}}</p>
                </div>
                <div>
                    <h2>本月审批通过</h2>
                    <p>{{ datas.approveCount }}</p>
                </div>
                <div>
                    <h2>本月审批驳回</h2>
                    <p>{{datas.rejectionCount}}</p>
                </div>
            </div>
            <!-- <span style="margin-left: 8px">
                <template v-if="hasSelected">
                    {{ `Selected ${state.selectedRowKeys.length} items11111111111111111111111` }}
                </template>
            </span> -->
        </div>
        <a-table :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
            :columns="columns" :data-source="data">
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'name'">
                    <div class="editable-cell">
                        <div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
                            <a-input v-model:value="editableData[record.key].name" @pressEnter="save(record.key)" />
                            <check-outlined class="editable-cell-icon-check" @click="save(record.key)" />
                        </div>
                        <div v-else class="editable-cell-text-wrapper">
                            {{ text || ' ' }}
                            <edit-outlined class="editable-cell-icon" @click="edit(record.key)" />
                        </div>
                    </div>
                </template>
                <template v-else-if="column.dataIndex === 'operation'">
                    <a @click="goDe(record)">查看</a>
                    <!-- <a-popconfirm v-if="dataSource.length" title="Sure to delete?" @confirm="onDelete(record.key)">
                        
                    </a-popconfirm> -->
                </template>
            </template>
        </a-table>


    </div>
</template>

<script setup lang="ts">
// import { computed, reactive } from 'vue';


import { computed, onMounted, reactive, ref } from 'vue'
import type { Ref, UnwrapRef } from 'vue';
import { useRouter } from 'vue-router';
import { CheckOutlined, EditOutlined } from '@ant-design/icons-vue';
import { cloneDeep } from 'lodash-es';
import {getApproval} from '../api/axios.js'
interface DataItem {
    key: string;
    name: string;
    age: number;
    address: string;
}
const router=useRouter()
const goDe=(i)=>{
    console.log(1111);
    
    console.log(i.userId);
    router.push(`/detail?id=${i.userId}`)
}
// const columns = [
//     {
//         title: 'name',
//         dataIndex: 'name',
//         width: '30%',
//     },
//     {
//         title: 'age',
//         dataIndex: 'age',
//     },
//     {
//         title: 'address',
//         dataIndex: 'address',
//     },
//     {
//         title: 'operation',
//         dataIndex: 'operation',
//     },
// ];
const dataSource: Ref<DataItem[]> = ref([
    {
        key: '0',
        name: 'Edward King 0',
        age: 32,
        address: 'London, Park Lane no. 0',
    },
    {
        key: '1',
        name: 'Edward King 1',
        age: 32,
        address: 'London, Park Lane no. 1',
    },
]);
const count = computed(() => dataSource.value.length + 1);
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});

const edit = (key: string) => {
    editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};
const save = (key: string) => {
    Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);
    delete editableData[key];
};

const onDelete = (key: string) => {
    dataSource.value = dataSource.value.filter(item => item.key !== key);
};
const handleAdd = () => {
    const newData = {
        key: `${count.value}`,
        name: `Edward King ${count.value}`,
        age: 32,
        address: `London, Park Lane no. ${count.value}`,
    };
    dataSource.value.push(newData);
};



type Key = string | number;

interface DataType {
    key: Key;
    num: string;
    type: number;
    pop: string;
    nowPop:string,
    time:string,
    state:string,
}

const columns = [
    {
        title: '序号',
        dataIndex: 'processId',
    },
    {
        title: '审批类型',
        dataIndex: 'processName',
    },
    {
        title: '申请人',
        dataIndex: 'username',
    },
    {
        title: '当前审批人',
        dataIndex: 'procCurrNodeUserName',
    },
    {
        title: '审批发起时间',
        dataIndex: 'procApplyTime',
    },
    {
        title: '审批状态',
        dataIndex: 'processState',
    },
    {
        title: '操作',
        dataIndex: 'operation',
    }
];
const data=ref([])
const datas=reactive({
    currApproveCount:'',
    approveCount:'',
    rejectionCount:''
})
const get=async ()=>{
    let res=await getApproval(1,10)
    console.log(res.data.data.rows,'rows');
    data.value=res.data.data.rows
    console.log(res.data.data,'datas');
    datas.approveCount=res.data.data.approveCount
    datas.currApproveCount=res.data.data.currApproveCount
    datas.rejectionCount=res.data.data.rejectionCount
}
onMounted(()=>{
    get()
})
// const data: DataType[] = [];
// for (let i = 0; i < 46; i++) {
//     data.push({
//         key: i,
//         name: `Edward King ${i}`,
//         age: 32,
//         address: `London, Park Lane no. ${i}`,
//     });
// }

const state = reactive<{
    selectedRowKeys: Key[];
    loading: boolean;
}>({
    selectedRowKeys: [], // Check here to configure the default column
    loading: false,
});
const hasSelected = computed(() => state.selectedRowKeys.length > 0);

const start = () => {
    state.loading = true;
    // ajax request after empty completing
    setTimeout(() => {
        state.loading = false;
        state.selectedRowKeys = [];
    }, 1000);
};
const onSelectChange = (selectedRowKeys: Key[]) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    state.selectedRowKeys = selectedRowKeys;
};
</script>

<style scoped>
.editable-cell {
  position: relative;
  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
.top{
    display: flex;
}
.top div{
    margin: 20px 20px;
}
</style>